<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
      <div class=" mt-4  pb-4 f-b " style="font-size: 24px">
          Table elements
      </div>
      <div class="d-flex">
          <div class="col-6 p-0">
              <div class=" mt-4  " style="font-size: 24px">
                  Tokens
              </div>
              <div class=" mt-4  " style="font-size: 16px">
                  Status token
              </div>
              <div class="d-flex flex-column">
                  <div class="col-12 p-0 mt-3">
                      <dfault-vuew>
                          <template v-slot:htm>
                              <span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span>
                          </template>
                          <template v-slot:htmcode>
                              <span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span>
                          </template>
                      </dfault-vuew>

                  </div>

              </div>
              <div class=" mt-4  " style="font-size: 16px">
                  Linked token
              </div>
              <div class="d-flex flex-column">
                  <div class="col-12 p-0 mt-3">
                      <dfault-vuew>
                          <template v-slot:htm>
                              <div>
                                 <button class="unis-token">Linked token</button>
                              </div>
                          </template>
                          <template v-slot:htmcode>
                              <button class="unis-token">Linked token</button>
                          </template>
                      </dfault-vuew>

                  </div>

              </div>


          </div>
          <div class="col-6 p-0 ml-4">
              <div class=" mt-4  " style="font-size: 24px">
                  Sort-order
              </div>
              <div class="d-flex flex-column">
                  <div class="col-12 p-0 mt-3">
                      <dfault-vuew>
                          <template v-slot:htm>
                              <div class="d-flex  align-items-center " style="width: 100%">
                                  <div class="col-3 d-flex  align-items-center">
                                      <button class="unis-sort-order">Date <span class="scale6"><i
                                              class=" icon-47 ml-2"></i>
                                      </span>
                                      </button>
                                  </div>
                                  <div class="col-3 d-flex  align-items-center">
                                      <button class="unis-sort-order">Date <span class="scale6"><i
                                              class=" icon-47 ml-2 icon-up"></i>
                                      </span>
                                      </button>
                                  </div>
                              </div>
                          </template>
                          <template v-slot:htmcode>
                              <button class="unis-sort-order">Date <span class="scale6"><i class=" icon-47 ml-2"></i>
                                      </span>
                              </button>
                              <button class="unis-sort-order">Date <span class="scale6"><i
                                      class=" icon-47 ml-2 icon-up"></i>
                                      </span>
                              </button>
                          </template>
                      </dfault-vuew>
                      <dfault-vuew>
                          <template v-slot:htm>
                              <div class="d-flex flex-column">
                                  <div class="d-flex  align-items-center mt-4" style="width: 100%">
                                      <div class="col-3 d-flex  align-items-center">
                                          <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                  class=" icon-47 ml-2"></i>
                                      </span>
                                          </button>
                                      </div>
                                      <div class="col-3 d-flex  align-items-center">
                                          <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                  class=" icon-47 ml-2"></i>
                                      </span>
                                          </button>
                                      </div>
                                      <div class="col-3 d-flex  align-items-center">
                                          <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                  class=" icon-47 icon-up ml-2"></i>
                                      </span>
                                          </button>

                                      </div>
                                  </div>
                                  <div class="d-flex  align-items-center" style="width: 100%; margin-top: 60px">
                                      <div class="col-3 d-flex  align-items-center">Shows dates in descending order
                                          (newest date at top)
                                      </div>
                                      <div class="col-3 d-flex  align-items-center"> Hovering over column title changes
                                          text color to G900
                                      </div>
                                      <div class="col-3 d-flex  align-items-center"> Shows dates in ascending order oldest
                                          date at top)
                                      </div>
                                  </div>
                              </div>
                          </template>
                          <template v-slot:htmcode>
                              <button class="unis-sort-order">Last modified <span class="scale8"><i
                                      class=" icon-47 ml-2"></i>
                                      </span>
                              </button>
                              <button class="unis-sort-order">Last modified <span class="scale8"><i
                                      class=" icon-47 icon-up ml-2"></i>
                                      </span>
                              </button>
                          </template>
                      </dfault-vuew>
                  </div>

              </div>git add
          </div>
      </div>

      <div style="font-size: 24px; margin-top: 120px" class="f-b">
          External Info table
      </div>

      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-info-table">
                          <thead>
                          <tr>

                              <th>Company</th>
                              <th>Reference #</th>
                              <th>Pickup Date</th>
                              <th>Origin</th>
                              <th>Delivery Date</th>
                              <th>Destination</th>
                              <th>Pallets</th>
                              <th></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                              <td>
                                  <button class="unis-token">Compact</button>
                              </td>
                              <td>04/12/2018</td>
                              <td>Hawthorne
                                  Hawthorne, CA
                              </td>
                              <td>3</td>
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td>Hawthorne, CA</td>
                              <td>
                                  <div class="unis-icon-btn unis-icon-btn-option h-w-32">
                                      <span class="icon-57"></span>

                                  </div>
                              </td>

                          </tr>
                          <tr>
                              <td>
                                  <button class="unis-token">Compact</button>
                              </td>
                              <td>04/12/2018</td>
                              <td>Hawthorne
                                  Hawthorne, CA
                              </td>
                              <td>3</td>
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td>Hawthorne, CA</td>
                              <td>
                                  <div class="unis-icon-btn unis-icon-btn-option h-w-32 active">
                                      <span class="icon-57"></span>
                                      <ul class="right pl-0 pr-0">
                                          <li style="height: 26px">Option 1</li>
                                          <li style="height: 26px">Option 2</li>
                                      </ul>
                                  </div>
                              </td>

                          </tr>
                          <tr v-for="index in 3">
                              <td>
                                  <button class="unis-token">Compact</button>
                              </td>
                              <td>04/12/2018</td>
                              <td>Hawthorne
                                  Hawthorne, CA
                              </td>
                              <td>3</td>
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td>Hawthorne, CA</td>
                              <td>
                                  <div class="unis-icon-btn unis-icon-btn-option h-w-32">
                                      <span class="icon-57"></span>
                                  </div>
                              </td>

                          </tr>

                          </tbody>
                      </table>
                  </div>


              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-info-table">
                  <thead>
                  <tr>

                      <th>Company</th>
                      <th>Reference #</th>
                      <th>Pickup Date</th>
                      <th>Origin</th>
                      <th>Delivery Date</th>
                      <th>Destination</th>
                      <th>Pallets</th>
                      <th></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td>
                          <button class="unis-token">Compact</button>
                      </td>
                      <td>04/12/2018</td>
                      <td>Hawthorne
                          Hawthorne, CA
                      </td>
                      <td>3</td>
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td>Hawthorne, CA</td>
                      <td>
                          <div class="unis-icon-btn unis-icon-btn-option h-w-32">
                              <span class="icon-57"></span>

                          </div>
                      </td>

                  </tr>
                  <tr>
                      <td>
                          <button class="unis-token">Compact</button>
                      </td>
                      <td>04/12/2018</td>
                      <td>Hawthorne
                          Hawthorne, CA
                      </td>
                      <td>3</td>
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td>Hawthorne, CA</td>
                      <td>
                          <div class="unis-icon-btn unis-icon-btn-option h-w-32 active">
                              <span class="icon-57"></span>
                              <ul class="right pl-0 pr-0">
                                  <li style="height: 26px">Option 1</li>
                                  <li style="height: 26px">Option 2</li>
                              </ul>
                          </div>
                      </td>

                  </tr>
                  <tr v-for="index in 3">
                      <td>
                          <button class="unis-token">Compact</button>
                      </td>
                      <td>04/12/2018</td>
                      <td>Hawthorne
                          Hawthorne, CA
                      </td>
                      <td>3</td>
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td>Hawthorne, CA</td>
                      <td>
                          <div class="unis-icon-btn unis-icon-btn-option h-w-32">
                              <span class="icon-57"></span>
                          </div>
                      </td>

                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size: 24px; margin-top: 120px">
          Empty


      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-info-table">
                          <thead>
                          <tr>
                              <th>Company</th>
                              <th>Reference #</th>
                              <th>Pickup Date</th>
                              <th>Origin</th>
                              <th>Delivery Date</th>
                              <th>Destination</th>
                              <th>Pallets</th>
                              <th></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                              <td colspan="8 " class="pl-0 pr-0">
                                  <div class="unis-mpty-tbody">No results found for “keyword”</div>
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>


              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-info-table">
                  <thead>
                  <tr>
                      <th>Company</th>
                      <th>Reference #</th>
                      <th>Pickup Date</th>
                      <th>Origin</th>
                      <th>Delivery Date</th>
                      <th>Destination</th>
                      <th>Pallets</th>
                      <th></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td colspan="8 " class="pl-0 pr-0">
                          <div class="unis-mpty-tbody">No results found for “keyword”</div>
                      </td>
                  </tr>
                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size: 24px; margin-top: 120px" class="f-b">
          Card table - default
      </div>

      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-card-table">
                          <thead>
                          <tr>
                              <th>PRO #</th>
                              <th>Reference #</th>
                              <th>Pickup Date</th>
                              <th>Origin</th>
                              <th>Delivery Date</th>
                              <th>Destination</th>
                              <th>Pallets</th>
                              <th>Weight</th>
                              <th></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 6" >
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                  <span class="f-13"> City, State</span></td>
                              <td>3</td>
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                  <span class="f-13"> City, State</span></td>
                              <td>100</td>
                              <td >
                                  <span class="unis-status unis-status-green" v-if="index == 1">Schedule pick up</span>
                                  <span class="unis-status unis-status-purple" v-if="index == 2">Schedule pick up</span>
                                  <span class="unis-status unis-status-pink" v-if="index == 3">Schedule pick up</span>
                                  <span class="unis-status unis-status-lightGreen" v-if="index == 4">Schedule pick up</span>
                                  <span class="unis-status unis-status-blue" v-if="index == 5">Schedule pick up</span>
                                  <span class="unis-status unis-status-green" v-if="index == 6">Schedule pick up</span>
                                  <img src="./img/warning-mark.svg" alt="" class="ml-2" v-if="index == 2">

                              </td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-card-table">
                  <thead>
                  <tr>
                      <th>PRO #</th>
                      <th>Reference #</th>
                      <th>Pickup Date</th>
                      <th>Origin</th>
                      <th>Delivery Date</th>
                      <th>Destination</th>
                      <th>Pallets</th>
                      <th>Weight</th>
                      <th></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 6">
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                          <span class="f-13"> City, State</span></td>
                      <td>3</td>
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                          <span class="f-13"> City, State</span></td>
                      <td>100</td>
                      <td >
                          <span class="unis-status unis-status-green" v-if="index == 1">Schedule pick up</span>
                          <span class="unis-status unis-status-purple" v-if="index == 2">Schedule pick up</span>
                          <span class="unis-status unis-status-pink" v-if="index == 3">Schedule pick up</span>
                          <span class="unis-status unis-status-lightGreen" v-if="index == 4">Schedule pick up</span>
                          <span class="unis-status unis-status-blue" v-if="index == 5">Schedule pick up</span>
                          <span class="unis-status unis-status-green" v-if="index == 6">Schedule pick up</span>
                          <img src="./img/warning-mark.svg" alt="" class="ml-2" v-if="index == 2">

                      </td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size: 16px; margin-top: 120px" class="f-b">
          Card row - pressed
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-card-table">
                          <thead>
                          <tr>
                              <th>PRO #</th>
                              <th>Reference #</th>
                              <th>Pickup Date</th>
                              <th>Origin</th>
                              <th>Delivery Date</th>
                              <th>Destination</th>
                              <th>Pallets</th>
                              <th>Weight</th>
                              <th></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr class="active" >
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                  <span class="f-13"> City, State</span></td>
                              <td>3</td>
                              <td>Los Angeles, CA</td>
                              <td>04/12/2018</td>
                              <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                  <span class="f-13"> City, State</span></td>
                              <td>100</td>
                              <td >
                                  <span class="unis-status unis-status-green" >Schedule pick up</span>


                              </td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-card-table">
                  <thead>
                  <tr>
                      <th>PRO #</th>
                      <th>Reference #</th>
                      <th>Pickup Date</th>
                      <th>Origin</th>
                      <th>Delivery Date</th>
                      <th>Destination</th>
                      <th>Pallets</th>
                      <th>Weight</th>
                      <th></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="active" >
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                          <span class="f-13"> City, State</span></td>
                      <td>3</td>
                      <td>Los Angeles, CA</td>
                      <td>04/12/2018</td>
                      <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                          <span class="f-13"> City, State</span></td>
                      <td>100</td>
                      <td >
                          <span class="unis-status unis-status-green" >Schedule pick up</span>


                      </td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size: 24px; margin-top: 120px" class="f-b">
          WISE data Table
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-data-table">
                          <thead>
                          <tr>
                              <th>Message</th>
                              <th>Sent to number</th>
                              <th>Status</th>
                              <th>Sent</th>
                              <th>Sent method</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 6">
                              <td>[UNIS] Your shipment PRO#400004...</td>
                              <td>8582295099</td>
                              <td class="f-13 f-b ft-succeedHint" v-if="index !=4">Success</td>
                              <td class="f-13 f-b ft-red900" v-if="index ==4">Fail</td>
                              <td>12/20/20 9:52 AM</td>
                              <td>Twilio.text</td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-data-table">
                  <thead>
                  <tr>
                      <th>Message</th>
                      <th>Sent to number</th>
                      <th>Status</th>
                      <th>Sent</th>
                      <th>Sent method</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 6">
                      <td>[UNIS] Your shipment PRO#400004...</td>
                      <td>8582295099</td>
                      <td class="f-13 f-b ft-succeedHint" v-if="index !=4">Success</td>
                      <td class="f-13 f-b ft-red900" v-if="index ==4">Fail</td>
                      <td>12/20/20 9:52 AM</td>
                      <td>Twilio.text</td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>

      <div style="font-size: 24px; margin-top: 20px" class="f-b">
          Variants
      </div>
      <div style="font-size:18px; margin-top: 20px" class="f-b">
          With selection
      </div>
      <div style="font-size:16px; margin-top: 20px" class="f-b">
          Default
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-data-table">
                          <thead>
                          <tr>
                              <th class="td-check-box"><input type="checkbox" name="layout" id="c6s1" class="unis-checkbox">
                                  <label for="c6s1">
                                      <span class="pl-3_5"></span>
                                  </label></th>
                              <th>Name</th>
                              <th>Category</th>
                              <th>Description</th>
                              <th>Modified by</th>
                              <th><button class="unis-sort-order">Last modified
                                  <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                              </button></th>
                              <th>Active</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 2">
                              <td class="td-check-box"><input type="checkbox" name="layout" :id="'c1'+index" class="unis-checkbox">
                                  <label :for="'c1'+index">
                                      <span class="pl-3_5"></span>
                                  </label></td>
                              <td>PickOrder</td>
                              <td>TMS</td>
                              <td>Pick up orders</td>
                              <td>TMSAdmin</td>
                              <td>12/20/20 9:52 AM </td>
                              <td><button class="unis-active unis-status-green">Active</button> </td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-data-table">
                  <thead>
                  <tr>
                      <th class="td-check-box"><input type="checkbox" name="layout" id="c5s1" class="unis-checkbox">
                          <label for="c5s1">
                              <span class="pl-3_5"></span>
                          </label></th>
                      <th>Name</th>
                      <th>Category</th>
                      <th>Description</th>
                      <th>Modified by</th>
                      <th><button class="unis-sort-order">Last modified
                          <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                      </button></th>
                      <th>Active</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 2">
                      <td class="td-check-box"><input type="checkbox" name="layout" :id="'c1'+index" class="unis-checkbox">
                          <label :for="'c1'+index">
                              <span class="pl-3_5"></span>
                          </label></td>
                      <td>PickOrder</td>
                      <td>TMS</td>
                      <td>Pick up orders</td>
                      <td>TMSAdmin</td>
                      <td>12/20/20 9:52 AM </td>
                      <td><button class="unis-active unis-status-green">Active</button> </td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size:16px; margin-top: 80px" class="f-b">
          Hover over “more” button
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0">
                      <table class="unis-data-table">
                          <thead>
                          <tr>
                              <th class="td-check-box"><input type="checkbox" name="layout" id="c4s1" class="unis-checkbox">
                                  <label for="c4s1">
                                      <span class="pl-3_5"></span>
                                  </label></th>
                              <th>Name</th>
                              <th>Category</th>
                              <th>Description</th>
                              <th>Modified by</th>
                              <th><button class="unis-sort-order">Last modified
                                  <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                              </button></th>
                              <th>Active</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 2">
                              <td class="td-check-box"><input type="checkbox" name="layout" :id="'c01'+index" class="unis-checkbox">
                                  <label :for="'c01'+index">
                                      <span class="pl-3_5"></span>
                                  </label></td>
                              <td>PickOrder</td>
                              <td>TMS</td>
                              <td>Pick up orders</td>
                              <td>TMSAdmin</td>
                              <td>12/20/20 9:52 AM </td>
                              <td class="d-flex align-items-center">
                                  <div>
                                  <button class="unis-active unis-status-green">Active</button></div>
                                  <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                                  <span class="icon-57"></span>
                              </div>
                                  </div>
                              </td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-data-table">
                  <thead>
                  <tr>
                      <th class="td-check-box"><input type="checkbox" name="layout" id="c3s1" class="unis-checkbox">
                          <label for="c3s1">
                              <span class="pl-3_5"></span>
                          </label></th>
                      <th>Name</th>
                      <th>Category</th>
                      <th>Description</th>
                      <th>Modified by</th>
                      <th><button class="unis-sort-order">Last modified
                          <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                      </button></th>
                      <th>Active</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 2">
                      <td class="td-check-box"><input type="checkbox" name="layout" :id="'cw1'+index" class="unis-checkbox">
                          <label :for="'cw1'+index">
                              <span class="pl-3_5"></span>
                          </label></td>
                      <td>PickOrder</td>
                      <td>TMS</td>
                      <td>Pick up orders</td>
                      <td>TMSAdmin</td>
                      <td>12/20/20 9:52 AM </td>
                      <td class="d-flex align-items-center">
                          <div>
                              <button class="unis-active unis-status-green">Active</button></div>
                          <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                              <span class="icon-57"></span>
                          </div>
                          </div>
                      </td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size:16px; margin-top: 120px" class="f-b">
          Batch actions
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0 d-flex flex-column">
                      <div class="col-12 d-flex align-items-center">
                          <div class="mb-3 mr-3">
                              <div class="unis-stepper">
                                  <button >
                                      <i class="icon-31"></i>
                                  </button>
                              </div>
                          </div>
                          <div class="mb-3 ml-3 mr-3">
                              <button class="unis-icon-btn">
                                  <i class="icon-56"></i>
                              </button>
                          </div>
                          <div class="mb-3 mr-3">
                              <button class="unis-icon-btn">
                                  <i class="icon-45"></i>
                              </button>
                          </div>
                          <div class="mb-3">
                              <button class="unis-icon-btn">
                                  <i class="icon-37"></i>
                              </button>
                          </div>
                      </div>

                      <table class="unis-data-table">
                          <thead>
                          <tr>
                              <th class="td-check-box"><input type="checkbox" name="layout" id="c2ss1" class="unis-checkbox">
                                  <label for="c2ss1">
                                      <span class="pl-3_5"></span>
                                  </label></th>
                              <th>Name</th>
                              <th>Category</th>
                              <th>Description</th>
                              <th>Modified by</th>
                              <th><button class="unis-sort-order">Last modified
                                  <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                              </button></th>
                              <th>Active</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 2">
                              <td class="td-check-box"><input type="checkbox" name="layout" :id="'ce1'+index" class="unis-checkbox">
                                  <label :for="'ce1'+index">
                                      <span class="pl-3_5"></span>
                                  </label></td>
                              <td>PickOrder</td>
                              <td>TMS</td>
                              <td>Pick up orders</td>
                              <td>TMSAdmin</td>
                              <td>12/20/20 9:52 AM </td>
                              <td class="d-flex align-items-center">
                                  <div>
                                      <button class="unis-active unis-status-green">Active</button></div>
                                  <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                                      <span class="icon-57"></span>
                                  </div>
                                  </div>
                              </td>
                          </tr>

                          </tbody>
                      </table>
                  </div>
              </div>

          </template>
          <template v-slot:htmcode>

              <div class="d-flex align-items-center">
                  <div class="mb-3 mr-3">
                      <div class="unis-stepper">
                          <button >
                              <i class="icon-31"></i>
                          </button>
                      </div>
                  </div>
                  <div class="mb-3 ml-3 mr-3">
                      <button class="unis-icon-btn">
                          <i class="icon-56"></i>
                      </button>
                  </div>
                  <div class="mb-3 mr-3">
                      <button class="unis-icon-btn">
                          <i class="icon-45"></i>
                      </button>
                  </div>
                  <div class="mb-3">
                      <button class="unis-icon-btn">
                          <i class="icon-37"></i>
                      </button>
                  </div>
              </div>
              <table class="unis-data-table">
                  <thead>
                  <tr>
                      <th class="td-check-box"><input type="checkbox" name="layout" id="c7s1" class="unis-checkbox">
                          <label for="c7s1">
                              <span class="pl-3_5"></span>
                          </label></th>
                      <th>Name</th>
                      <th>Category</th>
                      <th>Description</th>
                      <th>Modified by</th>
                      <th><button class="unis-sort-order">Last modified
                          <span class="scale8">
            <i class=" icon-47 ml-2"></i>
       </span>
                      </button></th>
                      <th>Active</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 2">
                      <td class="td-check-box"><input type="checkbox" name="layout" :id="'cr1'+index" class="unis-checkbox">
                          <label :for="'cr1'+index">
                              <span class="pl-3_5"></span>
                          </label></td>
                      <td>PickOrder</td>
                      <td>TMS</td>
                      <td>Pick up orders</td>
                      <td>TMSAdmin</td>
                      <td>12/20/20 9:52 AM </td>
                      <td class="d-flex align-items-center">
                          <div>
                              <button class="unis-active unis-status-green">Active</button></div>
                          <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                              <span class="icon-57"></span>
                          </div>
                          </div>
                      </td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>
      <div style="font-size:24px; margin-top: 120px" class="f-b">
          Time table
      </div>
      <dfault-vuew>
          <template v-slot:htm>
              <div class="d-flex flex-column" style="width: 100%">
                  <div class="col-12 p-0 d-flex flex-column">


                      <table class="unis-time-table">
                          <thead>
                          <tr>
                              <th colspan="2">FRIDAY, JAN 15, 2020</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="index in 2">
                              <td><span class="f-13 f-b">11/20/20 </span>
                                  <br>
                                  <span class="f-13 f-b">11:14 AM </span></td>
                              <td>Shipment update/notification</td>
                          </tr>
                          </tbody>
                      </table>
                      <table class="unis-time-table mt-4">
                      <thead>
                      <tr>
                          <th colspan="2">FRIDAY, JAN 15, 2020</th>

                      </tr>                    </thead>
                      <tbody>
                      <tr v-for="index in 2">
                          <td><span class="f-13 f-b">11/20/20 </span>
                              <br>
                              <span class="f-13 f-b">11:14 AM </span></td>
                          <td>Shipment update/notification</td>
                      </tr>

                      </tbody>
                  </table>

                  </div>
              </div>

          </template>
          <template v-slot:htmcode>
              <table class="unis-time-table">
                  <thead>
                  <tr>

                      <th colspan="2">FRIDAY, JAN 15, 2020</th>

                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 2">
                      <td><span class="f-13 f-b">11/20/20 </span>
                          <br>
                          <span class="f-13 f-b">11:14 AM </span></td>
                      <td>Shipment update/notification</td>
                  </tr>

                  </tbody>
              </table>
              <table class="unis-time-table mt-4">
                  <thead>
                  <tr>

                      <th colspan="2">FRIDAY, JAN 15, 2020</th>

                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="index in 2">
                      <td><span class="f-13 f-b">11/20/20 </span>
                          <br>
                          <span class="f-13 f-b">11:14 AM </span></td>
                      <td>Shipment update/notification</td>
                  </tr>

                  </tbody>
              </table>
          </template>
      </dfault-vuew>



    <div style="font-size: 24px; margin-top: 120px" class="f-b">
        Group - Table
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-12 p-0">
                    <table class="unis-group-table">
                        <thead>
                        <tr>
                            <th>PRO #</th>
                            <th>Reference #</th>
                            <th>Pickup Date</th>
                            <th>Origin</th>
                            <th>Delivery Date</th>
                            <th>Destination</th>
                            <th>Pallets</th>
                            <th>Weight</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td> <button class="unis-btn po-hover">
                                <i class="unis-arrow  f-18 mr-3 right"></i></button></td>
                            <td>04/12/2018</td>
                            <td> HawthorneCA </td>
                            <td>3</td>
                            <td>Los Angeles, CA</td>
                            <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                            <td>Hawthorne, CA ></td>
                            <td>100</td>
                            <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                                <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                                    <span class="icon-57"></span>
                                </div></td>

                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td> <button class="unis-btn po-hover">
                                <i class="unis-arrow  f-18 mr-3 "></i></button></td>
                            <td>04/12/2018</td>
                            <td> HawthorneCA </td>
                            <td>3</td>
                            <td>Los Angeles, CA</td>
                            <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                            <td>Hawthorne, CA ></td>
                            <td>100</td>
                            <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                                <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                                    <span class="icon-57"></span>
                                </div></td>

                        </tr>
                        <tr>
                            <td colspan="9">
                                <div class="d-flex ">
                                    <div class="col-10  d-flex flex-wrap mb-4 pb-4" style="background: #f6f6f6">
                                        <div class="col-10 pl-0 pt-4 pr-0">
                                            <div class="wid100 pl-4">
                                                <span class="f-b">Item List</span>
                                            </div>
                                            <table class="unis-border-line-table ">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Reference #</th>
                                                    <th>Pickup Date</th>
                                                    <th>Origin</th>
                                                    <th>Delivery Date</th>
                                                    <th>Destination</th>
                                                    <th>Pallets</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="i in 3">
                                                    <td>
                                                        {{i+1}}
                                                    </td>
                                                    <td>04/12/2018</td>
                                                    <td>Hawthorne Hawthorne, CA</td>
                                                    <td>3</td>
                                                    <td>Los Angeles, CA</td>
                                                    <td>04/12/2018</td>
                                                    <td>Hawthorne, CA</td>
                                                    <td>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-2  pt-4">
                                            <div class="win100 f-b">Vendor</div>
                                            <div class="mt-4">Vendor Nmae</div>
                                            <div class="mt-2">Reference #</div>
                                            <div>Los Angeles</div>
                                            <div>04/12/2018</div>
                                            <div>City, Stats</div>
                                        </div>
                                        <div class="col-10 pl-0 pt-4 pr-0">
                                            <div class="win100 f-b pl-4">Destination</div>
                                            <div class="wid100 d-flex mt-2 pl-1">
                                                <div class="col-8">Subtotal</div>
                                                <div class="col-4">$----</div>
                                            </div>
                                            <div class="wid100 d-flex mt-2 pl-1">
                                                <div class="col-8">text</div>
                                                <div class="col-4">$----</div>
                                            </div>
                                            <div class="wid100 d-flex mt-2 pl-1">
                                                <div class="col-8">text</div>
                                                <div class="col-4">$----</div>
                                            </div>

                                        </div>
                                        <div class="col-2  pt-4">
                                            <div class="win100 f-b">Delever</div>
                                            <div class="mt-4">Vendor Nmae</div>
                                            <div class="mt-2">Reference #</div>
                                            <div>Los Angeles</div>
                                            <div>04/12/2018</div>
                                            <div>City, Stats</div>
                                        </div>
                                    </div>
                                    <div class="col-2  pt-4">
                                        <div class="win100 f-b">Activity</div>
                                        <div class="win100 d-flex justify-content-between mt-4"><span>Los Angeles, CA</span> <span>04/12/2018</span></div>
                                    </div>

                                </div>
                            </td>
                        </tr>
                        </tbody>
                        <tbody v-for="index in 4">
                        <tr>
                            <td> <button class="unis-btn po-hover">
                                <i class="unis-arrow  f-18 mr-3 right"></i></button></td>
                            <td>04/12/2018</td>
                            <td> HawthorneCA </td>
                            <td>3</td>
                            <td>Los Angeles, CA</td>
                            <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                            <td>Hawthorne, CA ></td>
                            <td>100</td>
                            <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                                <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                                    <span class="icon-57"></span>
                                </div></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <table class="unis-group-table">
                <thead>
                <tr>
                    <th>PRO #</th>
                    <th>Reference #</th>
                    <th>Pickup Date</th>
                    <th>Origin</th>
                    <th>Delivery Date</th>
                    <th>Destination</th>
                    <th>Pallets</th>
                    <th>Weight</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td> <button class="unis-btn po-hover">
                        <i class="unis-arrow  f-18 mr-3 right"></i></button></td>
                    <td>04/12/2018</td>
                    <td> HawthorneCA </td>
                    <td>3</td>
                    <td>Los Angeles, CA</td>
                    <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                    <td>Hawthorne, CA ></td>
                    <td>100</td>
                    <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                        <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                            <span class="icon-57"></span>
                        </div></td>

                </tr>
                </tbody>
                <tbody>
                <tr>
                    <td> <button class="unis-btn po-hover">
                        <i class="unis-arrow  f-18 mr-3 "></i></button></td>
                    <td>04/12/2018</td>
                    <td> HawthorneCA </td>
                    <td>3</td>
                    <td>Los Angeles, CA</td>
                    <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                    <td>Hawthorne, CA ></td>
                    <td>100</td>
                    <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                        <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                            <span class="icon-57"></span>
                        </div></td>

                </tr>
                <tr>
                    <td colspan="9">
                        <div class="d-flex ">
                            <div class="col-10  d-flex flex-wrap mb-4 pb-4" style="background: #f6f6f6">
                                <div class="col-10 pl-0 pt-4 pr-0">
                                    <div class="wid100 pl-4">
                                        <span class="f-b">Item List</span>
                                    </div>
                                    <table class="unis-border-line-table ">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Reference #</th>
                                            <th>Pickup Date</th>
                                            <th>Origin</th>
                                            <th>Delivery Date</th>
                                            <th>Destination</th>
                                            <th>Pallets</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="i in 3">
                                            <td>
                                                {{i+1}}
                                            </td>
                                            <td>04/12/2018</td>
                                            <td>Hawthorne Hawthorne, CA</td>
                                            <td>3</td>
                                            <td>Los Angeles, CA</td>
                                            <td>04/12/2018</td>
                                            <td>Hawthorne, CA</td>
                                            <td>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-2  pt-4">
                                    <div class="win100 f-b">Vendor</div>
                                    <div class="mt-4">Vendor Nmae</div>
                                    <div class="mt-2">Reference #</div>
                                    <div>Los Angeles</div>
                                    <div>04/12/2018</div>
                                    <div>City, Stats</div>
                                </div>
                                <div class="col-10 pl-0 pt-4 pr-0">
                                    <div class="win100 f-b pl-4">Destination</div>
                                    <div class="wid100 d-flex mt-2 pl-1">
                                        <div class="col-8">Subtotal</div>
                                        <div class="col-4">$----</div>
                                    </div>
                                    <div class="wid100 d-flex mt-2 pl-1">
                                        <div class="col-8">text</div>
                                        <div class="col-4">$----</div>
                                    </div>
                                    <div class="wid100 d-flex mt-2 pl-1">
                                        <div class="col-8">text</div>
                                        <div class="col-4">$----</div>
                                    </div>

                                </div>
                                <div class="col-2  pt-4">
                                    <div class="win100 f-b">Delever</div>
                                    <div class="mt-4">Vendor Nmae</div>
                                    <div class="mt-2">Reference #</div>
                                    <div>Los Angeles</div>
                                    <div>04/12/2018</div>
                                    <div>City, Stats</div>
                                </div>
                            </div>
                            <div class="col-2  pt-4">
                                <div class="win100 f-b">Activity</div>
                                <div class="win100 d-flex justify-content-between mt-4"><span>Los Angeles, CA</span> <span>04/12/2018</span></div>
                            </div>

                        </div>
                    </td>
                </tr>
                </tbody>
                <tbody>
                <tr v-for="index in 4">
                    <td> <button class="unis-btn po-hover">
                        <i class="unis-arrow  f-18 mr-3 right"></i></button></td>
                    <td>04/12/2018</td>
                    <td> HawthorneCA </td>
                    <td>3</td>
                    <td>Los Angeles, CA</td>
                    <td><span class="unis-status bg-lavender200 ft-lavender700">Schedule pick up</span></td>
                    <td>Hawthorne, CA ></td>
                    <td>100</td>
                    <td class="d-flex justify-content-end">  <button class="unis-btn compact unis-btn-secondary ">Secondary</button><button class="unis-btn compact unis-btn-primary ml-4 mr-4">Primary</button>
                        <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-32">
                            <span class="icon-57"></span>
                        </div></td>

                </tr>
                </tbody>
            </table>
        </template>
    </dfault-vuew>
    <div style="font-size: 24px; margin-top: 120px" class="f-b">
        Leads - Table
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-12 p-0">
                    <div class="unis-leads-wrapper unis-scroll">
                        <table class="unis-leads-table bod-t2 ft-grey700">
                            <thead>
                                <tr>
                                    <th>Accessorial</th>
                                    <th>Amount</th>
                                    <th>Min</th>
                                    <th>Max</th>
                                    <th>UOM</th>
                                    <th>Alias</th>
                                    <th>Auto</th>
                                    <th>Pay amount</th>
                                    <th>Pay Type</th>
                                    <th>Pay Approval</th>
                                    <th>Task Master</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input type="text" class="unis-trans-input large-border">
                                    </td>
                                    <td>200.00</td>
                                    <td>100.00</td>
                                    <td>100.00</td>
                                    <td>
                                        <button style="min-width: 100px;"
                                            class="unis-select-hide unis-select unis-dropdown">
                                            <ul>
                                                <li>UOM</li>
                                                <li>No</li>
                                                <li>Yes</li>
                                            </ul>
                                        </button>
                                    </td>
                                    <td></td>
                                    <td>
                                        <input type="checkbox" name="layout" id="c1" class="unis-checkbox">
                                        <label for="c1">
                                            <span></span>
                                        </label>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>Required</td>
                                    <td></td>
                                    <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                        <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                            <span class="icon-30"></span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" class="unis-trans-input">
                                    </td>
                                    <td>200.00</td>
                                    <td>100.00</td>
                                    <td>100.00</td>
                                    <td>
                                        <button style="min-width: 100px;"
                                            class="unis-select-hide unis-select unis-dropdown">
                                            <ul>
                                                <li>UOM</li>
                                                <li>No</li>
                                                <li>Yes</li>
                                            </ul>
                                        </button>
                                    </td>
                                    <td></td>
                                    <td>
                                        <input type="checkbox" name="layout" id="c2" class="unis-checkbox">
                                        <label for="c2">
                                            <span></span>
                                        </label>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>Required</td>
                                    <td></td>
                                    <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                        <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                            <span class="icon-30"></span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" class="unis-trans-input">
                                    </td>
                                    <td>200.00</td>
                                    <td>100.00</td>
                                    <td>100.00</td>
                                    <td>
                                        <button style="min-width: 100px;"
                                            class="unis-select-hide unis-select unis-dropdown">
                                            <ul>
                                                <li>UOM</li>
                                                <li>No</li>
                                                <li>Yes</li>
                                            </ul>
                                        </button>
                                    </td>
                                    <td></td>
                                    <td>
                                        <input type="checkbox" name="layout" id="c3" class="unis-checkbox">
                                        <label for="c3">
                                            <span></span>
                                        </label>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>Required</td>
                                    <td></td>
                                    <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                        <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                            <span class="icon-30"></span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" class="unis-trans-input">
                                    </td>
                                    <td>200.00</td>
                                    <td>100.00</td>
                                    <td>100.00</td>
                                    <td>
                                        <button style="min-width: 100px;"
                                            class=" unis-select-hide unis-select unis-dropdown">
                                            <ul>
                                                <li>UOM</li>
                                                <li>No</li>
                                                <li>Yes</li>
                                            </ul>
                                        </button>
                                    </td>
                                    <td></td>
                                    <td>
                                        <input type="checkbox" name="layout" id="c4" class="unis-checkbox">
                                        <label for="c4">
                                            <span></span>
                                        </label>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>Required</td>
                                    <td></td>
                                    <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                        <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                            <span class="icon-30"></span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class="unis-leads-wrapper unis-scroll">
                <table class="unis-leads-table bod-t2 ft-grey700">
                    <thead>
                        <tr>
                            <th>Accessorial</th>
                            <th>Amount</th>
                            <th>Min</th>
                            <th>Max</th>
                            <th>UOM</th>
                            <th>Alias</th>
                            <th>Auto</th>
                            <th>Pay amount</th>
                            <th>Pay Type</th>
                            <th>Pay Approval</th>
                            <th>Task Master</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" class="unis-trans-input">
                            </td>
                            <td>200.00</td>
                            <td>100.00</td>
                            <td>100.00</td>
                            <td>
                                <button style="min-width: 100px;" class="unis-select-hide unis-select unis-dropdown">
                                    <ul>
                                        <li>UOM</li>
                                        <li>No</li>
                                        <li>Yes</li>
                                    </ul>
                                </button>
                            </td>
                            <td></td>
                            <td>
                                <input type="checkbox" name="layout" id="c1" class="unis-checkbox">
                                <label for="c1">
                                    <span></span>
                                </label>
                            </td>
                            <td></td>
                            <td></td>
                            <td>Required</td>
                            <td></td>
                            <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                    <span class="icon-30"></span>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="unis-trans-input">
                            </td>
                            <td>200.00</td>
                            <td>100.00</td>
                            <td>100.00</td>
                            <td>
                                <button style="min-width: 100px;" class="unis-select-hide unis-select unis-dropdown">
                                    <ul>
                                        <li>UOM</li>
                                        <li>No</li>
                                        <li>Yes</li>
                                    </ul>
                                </button>
                            </td>
                            <td></td>
                            <td>
                                <input type="checkbox" name="layout" id="c2" class="unis-checkbox">
                                <label for="c2">
                                    <span></span>
                                </label>
                            </td>
                            <td></td>
                            <td></td>
                            <td>Required</td>
                            <td></td>
                            <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                    <span class="icon-30"></span>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="unis-trans-input">
                            </td>
                            <td>200.00</td>
                            <td>100.00</td>
                            <td>100.00</td>
                            <td>
                                <button style="min-width: 100px;" class="unis-select-hide unis-select unis-dropdown">
                                    <ul>
                                        <li>UOM</li>
                                        <li>No</li>
                                        <li>Yes</li>
                                    </ul>
                                </button>
                            </td>
                            <td></td>
                            <td>
                                <input type="checkbox" name="layout" id="c3" class="unis-checkbox ">
                                <label for="c3">
                                    <span></span>
                                </label>
                            </td>
                            <td></td>
                            <td></td>
                            <td>Required</td>
                            <td></td>
                            <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                    <span class="icon-30"></span>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="unis-trans-input">
                            </td>
                            <td>200.00</td>
                            <td>100.00</td>
                            <td>100.00</td>
                            <td>
                                <button style="min-width: 100px;" class=" unis-select-hide unis-select unis-dropdown">
                                    <ul>
                                        <li>UOM</li>
                                        <li>No</li>
                                        <li>Yes</li>
                                    </ul>
                                </button>
                            </td>
                            <td></td>
                            <td>
                                <input type="checkbox" name="layout" id="c4" class="unis-checkbox">
                                <label for="c4">
                                    <span></span>
                                </label>
                            </td>
                            <td></td>
                            <td></td>
                            <td>Required</td>
                            <td></td>
                            <td style="position: absolute;" class="br-no bg-background100 mt-2">
                                <button class="unis-icon-btn h-w-32 unis-hide-icon">
                                    <span class="icon-30"></span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </template>
    </dfault-vuew>
    
    <div style="height: 80px;">
    
    </div>

</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>